<template>
  <div>
    <Drawer
      :title="CurdLayerData.title" v-model="CurdLayerData.isShow" :mask-closable=false :closable=true
      :draggable=true @on-close="drawer_close()" :style="drawerLayerStyle" :width="drawerLayerStyle.width">
      <Form ref="formValidate" :model="CurdFormData" :rules="ruleValidate" label-position="left" :label-width="110">
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="用户名：" prop="user_name">
              <Input v-model="CurdFormData.user_name" placeholder="用户名">
              </Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="姓名：" prop="real_name">
              <Input v-model="CurdFormData.real_name" placeholder="真实姓名"/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="密码：" prop="pass">
              <Input type="password" v-model="CurdFormData.pass" placeholder="密码">
              </Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="联系方式：" prop="phone">
              <Input v-model="CurdFormData.phone" placeholder="联系方式"/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="状态：" prop="status">
              <Select v-model.number="CurdFormData.status">
                <Option v-for="item in select_status" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="头像">
          <Row :gutter="16">
            <Col span="3">
              <Avatar :src="headerImg"  icon="ios-person" size="large" />
            </Col>
            <Col span="8">
              <Upload src="" :show-upload-list="false" :headers="headers" :on-success="handleSuccess" :action="baseUrl+'/upload/files'">
                  <Button icon="ios-cloud-upload-outline">点击上传</Button>
              </Upload>
            </Col>
          </Row>
          <Input style="display:none"  v-model="CurdFormData.avatar" :rows="4"/>
        </FormItem>
        <FormItem label="备注：">
          <Input type="textarea" v-model="CurdFormData.remark" :rows="4" placeholder="请输入备注"/>
        </FormItem>
      </Form>
      <div class="drawerFooter">
        <Button type="primary" @click="CurdLayerData.action==='create'?createSend():editSend()">{{ CurdLayerData.title }}</Button>
      </div>
    </Drawer>
  </div>

</template>

<script>
import {create, edit} from '@/api/system-setting/user'
import common_func from '@/libs/common_func'
import {getToken} from '@/libs/util'
export default {
  name: 'createEdit',
  props: {
    CurdFormData: Object,
    CurdLayerData: Object
  },
  // 注意：新增界面的初始化函数在父页面初始化时会调用，并不是在显示的时候调用
  created() {
    this.baseUrl = common_func.GetAdminPath()
    this.picUrl = common_func.GetPublicPath()
  },
  mounted() {
  },
  watch: {
    CurdFormData: {
      deep: true,
      immediate: true,
      handler(new_value, old_value) {
        // console.log(old_value, new_value)
      }
    }
  },
  data() {
    return {
      baseUrl : '',
      picUrl:'',
      headerImg:'',
      headers: {
        Authorization : 'Bearer ' + getToken()
      },
      // select options 可选值
      select_status: common_func.SelectStatus,
      // 抽屉层样式
      drawerLayerStyle: {
        height: common_func.GetBrowserHeight() + 'px',
        width: (common_func.GetBrowserWidth() - 900),
        overflowY: 'auto',
        overflowX: 'hidden',
        paddingBottom: '20px',
        position: 'static'
      },
      ruleValidate: {
        user_name: [
          {required: true, message: '用户名必填', trigger: 'blur'},
          {type: 'string', min: 2, max: 40, message: '用户名[2,40]个文字', trigger: 'blur'}
        ],
        pass: [
          {required: true, message: '密码必填', trigger: 'blur'},
          {type: 'string', min: 2, max: 40, message: '密码[2,40]个文字', trigger: 'blur'}
        ],
        real_name: [
          {required: true, message: '姓名必填', trigger: 'blur'},
          {type: 'string', min: 2, max: 40, message: '姓名[2,40]个文字', trigger: 'blur'}
        ],
        status: [
          {type: 'integer', required: true, message: '状态必须选择', trigger: 'blur'}
        ],
        avatar: [
          {required: true, message: '头像必须上传', trigger: 'blur'},
        ],
        remark: [
          {type: 'string', max: 300, message: '备注不能超过300个字符', trigger: 'blur'}
        ]
      },
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      commonOrgTree: {
        is_show: false,
        ref: 'commonOrgTree'
      }
    }
  },
  computed: {
  },
  methods: {
    createSend() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          create(this.CurdFormData).then(res => {
            if (res.data.code === 200) {
              common_func.Curd.SuccessTips(this, res.data.msg)
              // 刷新主界面数据
              this.$emit('create_edit_after')
            }
          }).catch(res => {
            common_func.Curd.FailTips(this, res.data.msg)
          })
        }
      })
    },
    editSend() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          edit(this.CurdFormData).then(res => {
            if (res.data.code === 200) {
              common_func.Curd.SuccessTips(this, res.data.msg)
              // 刷新主界面数据
              this.$emit('create_edit_after')
            }
          }).catch(res => {
            common_func.Curd.FailTips(this, res.data.msg)
          })
        }
      })
    },
    drawer_close() {
      // 关闭回调事件
      // console.log(this.CurdLayerData)
    },
    ok_event() {
      if (!common_func.Curd.CommonComponentSelectedCheck(this, this.$refs.commonOrgTree.cur_item.id >= 0)) {
        return
      }
      let item = this.$refs.commonOrgTree.cur_item
      this.CurdFormData.org_post_name = item.title
      this.CurdFormData.org_post_id = item.id
    },
    handleSuccess(res, file) {
      this.CurdFormData.avatar = file.response.data.path
      this.headerImg = this.picUrl + this.CurdFormData.avatar
    }
  }
}
</script>

<style scoped>
.drawerFooter {
  width: calc(100% - 30px);
  position: absolute;
  bottom: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: center;
}

</style>
